<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        品牌管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>添加商品
      </p>
      <div class="content">
        <div class="biggerBox">
          <div class="biggerLeft">
            <el-tabs
              v-model="activeName"
              @tab-click="handleClick"
              style="margin-top: 20px"
            >
              <el-tab-pane label="登录页" name="first">
                <loginPage :activeName="activeName" />
              </el-tab-pane>
              <el-tab-pane label="启动页" name="second">
                <StartPage />
              </el-tab-pane>
              <el-tab-pane label="引导页" name="third">
                <GuidePage />
              </el-tab-pane>
              <el-tab-pane label="分享页" name="fourth">
                <SharePage />
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="biggerRight">
            <div class="bannerBox" style="width: 350px; margin: 0 auto;height:623px">
              <el-carousel indicator-position="outside">
                <el-carousel-item v-for="item in 4" :key="item">
                  <h3>{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 登录页面
import loginPage from "./components/loginPage";
// 启动页面
import StartPage from "./components/startPage";
// 引导页面
import GuidePage from "./components/guidePage";
// 分享页面
import SharePage from "./components/sharePage";
export default {
  components: {
    loginPage,
    StartPage,
    GuidePage,
    SharePage,
  },
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped>
.biggerBox {
  display: flex;
  padding: 0 20px;
}
.biggerLeft {
  width: calc(100% - 400px);
  height: calc(100vh - 100px - 26px);
  overflow-y: auto;
  padding-right: 20px;
  box-sizing: border-box;
}
.biggerRight {
  width: 400px;
  background: #f9fafc;
  height: calc(100vh - 100px - 26px);
}
/deep/ .el-tabs__item {
  font-size: 16px !important;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/deep/ .el-carousel__container{
  height: 632px;
  margin-top: 80px;
}
</style>